<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>


</head>
<body>
<h1>用户注册</h1>
<hr>
<div>
    用户名: <input type="text" id="username">
    <span id="err" style="display: none">用户名重复</span>
</div>
<div>
    自我介绍：<input type="text" id="intro">
</div>
<div>
    <button id="btnRegister">注册</button>
</div>

</body>
<script src="mock/db.js"></script>
<script>


    var username = document.getElementById('username');
    username.onkeyup = function (){
        usernameKeyUp(this.value,function (flag){
            if(flag){
              var errBox=   document.getElementById('err');
              errBox.style.display = 'block';
              errBox.style.color='red'
            }
        })
    };


    function usernameKeyUp(username, success) {

        setTimeout(function () {
            var flag = checkUser(username);
            success(flag);
        }, 1000)

    }

    /**
     *  检查 输入的用户名 和 数据中的数据 是否 重复
     * */
    function checkUser(username) {
        var flag = false;

        var current = users.find(function (user) {
            return user.username == username;
        });
        if (current) {
            flag = true;
        }
        return flag;
    }


</script>
</html>